<template>
	<view class="article">
		<unicloud-db v-slot:default="{data, loading, error, options}" :collection="collection" :where="where"
			:getone="true" :manual="true" ref="detail" @load="loadData">
			<template v-if="!loading && data">
				<view class="article-title">{{title}}</view>
				<view class="header-content">
					<view class="header-content"
						style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;padding: 15px;">
						<view class="content-class">
							{{data.category_id[0].name}}
						</view>
						<view class="uni-note">发布于 {{timestampToDateString(data.publish_date)}} </view>
					</view>
				</view>
				<view class="banner">
					<image class="banner-img" :src="data.avatar_file.path" mode="widthFix"></image>
					<view class="banner-title">
						<text class="uni-ellipsis">{{data.excerpt}}</text>
					</view>
				</view>
				<view class="article-content">
					<rich-text :nodes="data.content" style="font-size: 14px;line-height: 1.8;color:#333"></rich-text>
				</view>
			</template>
		</unicloud-db>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser'
	export default {
		data() {
			return {
				collection: 'opendb-news-articles,opendb-news-categories',
				id: "65ff18ee8b0da4a4e4346823",
				title: '',
			}
		},
		computed: {
			where() {
				console.log(this.id);
				return `_id =="${this.id}"`
			}
		},
		onLoad(event) {
			//获取真实新闻id，通常 id 来自上一个页面
			if (event.id) {
				this.id = event.id
			}
			//若上一页传递了标题过来，则设置导航栏标题
			if (event.title) {
				this.title = event.title
				uni.setNavigationBarTitle({
					title: event.title
				})
			}
		},
		onReady() {
			if (this.id) {
				this.$refs.detail.loadData()
			} else {
				uni.showToast({
					icon: 'none',
					title: '出错了，新闻ID为空'
				})
			}
		},
		methods: {
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			},
			loadData(data) {
				console.log(data);
				//如果上一页未传递标题过来（如搜索直达详情），则从新闻详情中读取标题
				if (this.title == '' && data.title) {
					this.title = data.title
					uni.setNavigationBarTitle({
						title: data.title
					})
				}
			}
		}
	}
</script>

<style>
	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 14px;
	}

	/* 标题 */
	.uni-title {
		display: flex;
		margin-bottom: 5px;
		font-size: 14px;
		font-weight: bold;
		color: #3b4144;
	}

	/* 描述 额外文本 */
	.uni-note {
		color: #999;
		font-size: 12px;
	}

	.footer {
		display: flex;
		align-items: center;
	}

	.footer-button {
		display: flex;
		align-items: center;
		font-size: 12px;
		height: 30px;
		color: #fff;
		background-color: #ff5a5f;
	}

	.banner {
		position: relative;
		margin: 0 15px;
		height: 180px;
		overflow: hidden;
	}

	.banner-img {
		position: absolute;
		width: 100%;
	}

	.banner-title {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 15px;
		width: 100%;
		bottom: 0;
		height: 30px;
		font-size: 14px;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		overflow: hidden;
		box-sizing: border-box;
	}

	.uni-ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.article-title {
		padding: 20px 15px;
		padding-bottom: 0;
	}

	.article-content {
		padding: 15px;
		font-size: 15px;
		overflow: hidden;
	}
</style>